<template>
  <div class="app-container">
    <el-row :gutter="24">
      <!--部门数据-->
      <el-col :span="5" :xs="24">
        <div class="head-container">
          <el-tree
            :data="ouTree"
            :expand-on-click-node="false"
            ref="tree"
            node-key="id"
            lazy
            :props="treeProps"
            :load="getSubTree"
            highlight-current
            :default-expanded-keys="expandKeys"
            @current-change="handleNodeClick"
          />
        </div>
      </el-col>
      <!--用户数据-->
      <el-col :span="19" :xs="24">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="mini"
          class="queryForm"
          :inline="true"
          v-show="showSearch"
          label-width="68px"
        >
          <el-form-item prop="displayName">
            <el-input
              v-model="queryParams.displayName"
              placeholder="组织名称"
              clearable
              @keyup.enter.native="handleQuery"
            >
              <el-select
                v-model="queryParams.searchScope"
                slot="prepend"
                placeholder="搜索范围"
              >
                <el-option label="全局搜索" value="global"></el-option>
                <el-option
                  label="当前组织"
                  value="current"
                ></el-option> </el-select
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
            <el-button icon="el-icon-upload2" size="mini" @click="exportExcel"
              >导出</el-button
            >
          </el-form-item>
        </el-form>

        <el-table class="dense-table" v-loading="loading" :data="userList">
          <el-table-column label="组织编码" key="cn" prop="cn" width="200px">
            <template slot-scope="scope">
              <el-link
                size="mini"
                type="primary"
                @click="
                  () => {
                    currentOrganization = scope.row;
                    OrganizationDetailDrawerVisible = true;
                  }
                "
                >{{ scope.row.cn }}</el-link
              >
            </template></el-table-column
          >

          <el-table-column label="组织名称" key="ou" prop="ou" width="200px" />
          <el-table-column
            label="显示名称"
            key="displayName"
            prop="displayName"
            width="200px"
          />
          <el-table-column
            label="描述"
            key="description"
            prop="description"
            :show-overflow-tooltip="true"
          />
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>
    <!-- 用户详情抽屉 -->

    <el-drawer
      :visible.sync="OrganizationDetailDrawerVisible"
      v-if="currentOrganization"
      size="600px"
      :modal="false"
    >
      <h3 slot="title">操作日志详情</h3>
      <div class="info-container" style="padding: 20px 15px">
        <Description-form :data="currentOrganization">
          <Description-item label="组织编码" prop="cn" />
          <Description-item label="组织名称" prop="ou" />
          <Description-item label="显示名称" prop="displayName" />
          <Description-item label="组织位置" prop="distinguishedName" />
          <Description-item label="描述" prop="description">
            <el-input
              type="textarea"
              :value="userList.description"
              :style="{ width: '340px' }"
              :autosize="{ minRows: 4, maxRows: 10 }"
            >
            </el-input>
          </Description-item>
        </Description-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import ouApi from "@/api/activeDirectory/ou";
import { orgMixin } from "../mixin/org.js";
export default {
  name: "ou",
  mixins: [orgMixin],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户表格数据
      userList: null,
      // 弹出层标题
      title: "",

      // 是否显示弹出层
      open: false,
      // 部门名称
      deptName: undefined,
      // 默认密码
      initPassword: undefined,
      // 日期范围
      dateRange: [],
      // 状态数据字典
      statusOptions: [],
      // 性别状态字典
      sexOptions: [],
      // 岗位选项
      postOptions: [],
      // 角色选项
      roleOptions: [],
      // 表单参数
      form: {},

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        displayName: undefined,
        deptId: undefined,
        searchScope: "current",
        parentCn: undefined,
      },
      //用户详情抽屉
      currentOrganization: null,
      OrganizationDetailDrawerVisible: false,
    };
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    },
  },
  mounted() {
    this.getTreeselect();
  },
  methods: {
    /** 查询用户列表 */
    getList() {
      if (
        this.queryParams.searchScope == "global" &&
        !this.queryParams.displayName
      ) {
        this.$message.warning("全局搜索必须输入查询条件！");
        return;
      }
      this.loading = true;
      ouApi
        .subPageList(this.queryParams)
        .then((res) => {
          this.userList = res.data.data;
          this.total = res.data.pagination.dataCount;
        })
        .catch()
        .finally((n) => {
          this.loading = false;
        });
    },
    // 导出
    exportExcel() {
      if (
        this.queryParams.searchScope == "global" &&
        !this.queryParams.displayName
      ) {
        this.$message.warning("全局搜索导出必须输入查询条件！");
        return;
      }
      this.loading = true;
      ouApi
        .exportExcel(this.queryParams)
        .then((res) => {
          const content = res.data;
          const blob = new Blob([content], {
            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8",
          });
          var headerVal = res.headers["content-disposition"].split(";")[1];
          const fileName = headerVal.substr("filename=".length + 1);
          if (navigator.msSaveBlob) {
            navigator.msSaveBlob(blob, fileName);
          } else {
            let url = window.URL.createObjectURL(blob);
            const link = document.createElement("a");
            link.href = url;
            link.download = fileName;
            link.click();
            url.revokeObjectURL(link.href);
          }
        })
        .catch()
        .finally((n) => {
          this.loading = false;
        });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(node) {
      this.queryParams.parentCn = node.data.cn;
      this.queryParams.searchScope = "current";
      this.getList();
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        userId: undefined,
        deptId: undefined,
        userName: undefined,
        nickName: undefined,
        password: undefined,
        phonenumber: undefined,
        email: undefined,
        sex: undefined,
        status: "0",
        remark: undefined,
        postIds: [],
        roleIds: [],
      };
      this.resetForm("form");
    },
  },
};
</script>
<style lang="scss"></style>
